<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="https://baidu.com">
        <input type="text" id="username" placeholder="用户名" value="abc"><br>
        <input type="text" id="email" placeholder="邮箱"><br>

        <input type="password" id="pw1" placeholder="密码"><br>
        <input type="password" id="pw2" placeholder="重复密码">
        <input type="submit" value="登陆">
        <input type="reset" value="重置">
    </form>
    <script>
        var user = document.getElementById('username');
        var email = document.getElementById('email');
        var form = document.querySelector('form');
        var pw1 = document.querySelector('#pw1');
        var pw2 = document.querySelector('#pw2')
            // input事件是一个实时的，只要输入框的内容发生改变立即触发
        user.oninput = function(e) {
                console.log(this.value)
            }
            //但在输入框输入内容以后并让输入框失去焦点才会触发
        user.onchange = function(e) {
                console.log(this.value)
            }
            //submit事件是加在表单上的，而不是按钮上
        form.onsubmit = function(e) {
            if (user.value.length <= 6) {
                //会阻止表单的提交
                e.preventDefault();
                alert("表单验证为通过")
            }
            if (pw1.value != pw2.value || pw1.value.length <= 6) {
                e.preventDefault();
                alert("密码不符合规范")
            }

            console.log(e)
        }
        onkeypress = function(e) {
            console.log(`你按下了${e.key}`)
        }
    </script>
</body>

</html>